<template>
    <div>
    <query-form @handleReset="handleReset" @handleFormAction="handleFormAction" :formColumns="formColumns"></query-form>
    <base-table @handleAction="handleAction" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"  :pager="pager" :supplier-table-data="supplierTableData" :columns="columns"></base-table>
    </div>
</template>

<script>
import BaseTable from "../components/common/BaseTable"
import QueryForm from "../components/common/QueryForm.vue"
import goodsModel from '../api/good.js'
export default {
  data() {
    return {
      pager : {
        currentPage : 1,
        pageSize : 2,
        total : 0,
        pageSizes : [2,10,15,50],
      },
      supplierTableData : [],
      columns : [
        {
          label : "序号",
          type : "index",
          width : "80"
        },
        {
          label : "商品名称",
          width : "150",
          prop : "name"
        },
        {
          label : "商品编码",
          width : "100",
          prop : "code"
        },
        {
          label : "商品规格",
          width : "150",
          prop : "spec"
        },
        {
          label : "零售价",
          width : "150",
          prop : "retailPrice"
        },
        {
          label : "进货商",
          width : "150",
          prop : "purchasePrice"
        },
        {
          label : "库存数量",
          width : "150",
          prop : "storageNum"
        },
        {
          label : "供应商",
          width : "150",
          prop : "supplierName"
        },
        {
          type : "action",
          label : "操作",
          width : "150",
          list : [
            {
              action : "edit",
              size : "mini",
              text : "编辑",
              type : "primary"
            },
            {
              action : "delete",
              size : "mini",
              text : "删除",
              type : "danger"
            }
          ]
        }
      ],
      formColumns : [
        {
          prop : "name",
          placeholder : "商品名称",
          type : "input"
        },
        {

          prop : "linkman",
          placeholder : "商品编号",
          type : "input"
        },
        {
          prop : "mobile",
          placeholder : "选择供应商",
          type : "input"
        },
        {
          type: "action",
          list: [
            {
              action: "search",
              size: "mini",
              text: "查询",
              type: "primary"
            },
            {
              action: "add",
              size: "mini",
              text: "新增",
              type: "primary"
            },
            {
              action: "reset",
              size: "mini",
              text: "重置",
              type: "default"
            }
          ]
        }
      ],
      searchModelForm : {}
    }
  },
  created() {
    this.initGoodsList()
  },
  methods: {
    // 获取商品数据列表
    async initGoodsList(){
      const response = await goodsModel.getGoodsList(this.pager.currentPage, this.pager.pageSize, this.searchModelForm)
      if(response.error_code === 0){
        const {count, rows} = response.msg
        this.supplierTableData =rows
        this.pager.total = count
      }
    },
    handleAction({action,row}){
      if(action == "edit"){
        this.handleEditSupplier(row.id)
      }else if(action == "delete"){
        this.handleDeleteSupplier(row.id)
      }
    },
    // 编辑商品的方法
    handleEditSupplier(id){console.log("edit 1")},
    // 删除商品的方法
    handleDeleteSupplier(id){
      this.$confirm('确认删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const response = await goodsModel.deleteGoods(id)
        if(response.error_code == 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.pager.currentPage = 1
          this.initGoodsList()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 条数发生改变触发的方法
    handleSizeChange(size){
      this.pager.pageSize = size
      this.initGoodsList()
    },
    // 页码发生变化会触发的方法
    handleCurrentChange(page){
      this.pager.currentPage = page
      this.initGoodsList()
    },
    // 搜索框查询按钮方法
    handleFormAction({action,searchModelForm}){
      if(action == "search"){
        this.searchModelForm = searchModelForm
        this.handleSearchData()
      }else if(action == "add"){
        this.handleAddData()
      }else if(action == "reset"){
        this.handleReset()
      }
    },
      // 查询
    handleSearchData(){
      this.initGoodsList()
    },
    // 新增
    handleAddData(){
      console.log("add")
    },
    // 重置
    handleReset(){
      this.searchModelForm = {}
      this.initGoodsList()
    }
  },
  components: {
    QueryForm,
    BaseTable
  }
}
</script>

<style>

</style>